<template>
  <div class="template2" :style="'padding:'+height+'px 0px 60px 0px;'">
    <el-container>
      <div class="head" id="head1">
        <div class="tit">报告数据
            <span class="add" @click="outData('add')">导出</span>
        </div>
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
          <el-form-item prop="houseName">
            <el-autocomplete size="mini" style="width:150px;" :maxlength='10' class="inline-input" v-model="formInline.houseName" :fetch-suggestions="querySearch" placeholder="小区名称" :trigger-on-focus="false"></el-autocomplete>
          </el-form-item>
          <el-form-item prop="deliveryStatus">
            <el-select size="mini" style="width:100px;" v-model="formInline.deliveryStatus" placeholder="交付状况">
              <el-option label="精装" value="1"></el-option>
              <el-option label="毛坯" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="developers">
            <el-select size="mini" style="width:100px;" v-model="formInline.developers" placeholder="开发商">
              <el-option v-for="item in options" :label="item.code" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="reportTime">
            <el-date-picker size="mini" v-model="formInline.reportTime" type="daterange" style="width:210px;" clearable value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <span @click="resetForm('formInline')" class="reset">
              <i class="icon iconfont icon-icon901"></i> 重置
            </span>
          </el-form-item>
        </el-form>
      </div>
      <el-main style="height:100%">
        <reportDataList></reportDataList>
      </el-main>
      <el-footer id="foot">
        <span class="tips">以上列表中“0”表示合格，大于“0”表示不合格，大于“1”表示有多个不合格</span>
        <el-pagination size="mini" background layout="total,sizes,prev, pager, next" @size-change="sizeChange" :current-page="obj.page" @current-change="page" :total="listNum" :page-sizes="[20, 30, 50, 100]"></el-pagination>
      </el-footer>
    </el-container>
  </div>
</template>
<script> 
import reportDataList from './reportDataList.vue'
import { request } from "../../assets/request.js";
export default {
  data() {
    return {
      height: 0,
      formInline: {
        developers:'', //开发商
        deliveryStatus:'1',//交付状况
        houseName:'',//小区名称
        reportTime:'', //报告时间
      },
      listNum:10,
      options: '', //开发商列表
      obj:{
        page:1,
        size:20,
      },
    };
  },
  created() {
    this.loadAll(); //查询所有楼盘
    this.developers(); //查询所有 开发商
    this.$root.$on("report",data=>{
      this.listNum=data
    })
  },
  
  methods: {
    resetForm(formName) { //清空
      this.$refs[formName].resetFields();
    },
    onSubmit() {   //搜索查询
      let obj= this.dataCollation()
      this.$root.$emit('searchReportData',obj)
    },
    dataCollation(){ //整理数据
      let formInline=this.formInline
      let aa=this.obj
      console.log(formInline)
      let obj={
        houseName:formInline.houseName,
        developers:formInline.developers,
        page:aa.page,
        size:aa.size,
      }
      obj.deliveryStatus=parseInt(formInline.deliveryStatus)
      if(formInline.reportTime[0] && formInline.reportTime[1]){ //判断时间是否为空
        obj.beginDate=formInline.reportTime[0]
        obj.endDate=formInline.reportTime[1]
      }else{
        obj.beginDate=''
        obj.endDate=''
      }
      return obj
    },
    page(e){ //页码
      let obj=this.obj;
      obj.page=e
      this.$root.$emit('searchReportData',obj)
    },
    sizeChange(e){ //每页数量
      let obj=this.obj;
      obj.size=e
      obj.page=1
      this.$root.$emit('searchReportData',obj) 
    },
    querySearch(queryString, cb) { //楼盘
      var restaurants = this.restaurants; 
      var len = restaurants.length;
      var arr = [];
      for(var i=0;i<len;i++){
          //如果字符串中不包含目标字符会返回-1
          if(restaurants[i].value.indexOf(queryString)>=0){
              arr.push(restaurants[i]);
          }
      }
      cb(arr);
    },
    loadAll() { //查询所有楼盘
      let url = "houses/all";
      let that=this   //解决this指向问题
      request.ajaxGet({
        url,
        that,
        fn(res){
          for(let i in res){
            res[i].value=res[i].name
          }
          that.restaurants=res
          that.$store.state.property=res
        }
      })
    },
    outData(){ //导出 数据 订单列表数据
        let that=this 
        request.delAlert({
            name:'导出表格数据',
            that,
            fn(obj){
              let url ="order/report/toExcel";
              let params=that.dataCollation()
              let data=that.obj
              delete params.page
              delete params.size
              console.log(params)
              request.dowload({
                url,
                that,
                params,
                fn(res){
                  console.log(res)
                }
              })
            }
        })
    },
    developers(){ //查询所有开发商
      let url1 = "constant/second/12";
      let that=this
      console.log(url1)
      request.ajaxGet({  //开发商
          url:url1,
          that,
          fn(resp){
            that.options=resp
          }
      })
    },
  },
  mounted() {
    let headH = document.getElementById("head1").offsetHeight;
    this.height=headH
  },
  components:{
    reportDataList,   //订单列表
  },
};
</script>
<style scoped lang="less">
@import "../template2.less";
</style>
<style lang="less" scoped>
  .tips{
    float:left;
    line-height:40px;
    font-size:12px;
    color: #97A8BE;
  }
</style>

